<template>

  <AppNavbar @search="handleSearch" v-model:searchKey="searchKey" />


  <div class="upload-container">
    <div class="page-header">
      <h1 class="page-title">
        <el-icon><Upload /></el-icon>
        上传视频
      </h1>
    </div>

    <!-- 上传前状态 -->
    <div
        class="upload-box"
        v-if="uploadStatus === 'before'"
        @dragover.prevent="handleDragOver"
        @dragleave="handleDragLeave"
        @drop.prevent="handleDrop"
        :class="{ 'dragover': isDragging }"
        @click="triggerFileInput"
    >
      <el-icon class="upload-icon"><UploadFilled /></el-icon>
      <h3 class="upload-title">拖拽视频文件到此处</h3>
      <p class="upload-tip">支持MP4、MOV、AVI等常见格式，文件大小不超过1GB</p>
      <button class="upload-button">选择文件</button>
      <input
          type="file"
          ref="fileInput"
          style="display: none"
          accept="video/*"
          @change="handleFileChange"
      >
    </div>

    <!-- 上传中和完成状态 -->
    <div class="upload-form-container" v-else>
      <!-- 上传状态区域 -->
      <div class="upload-status">
        <div class="status-icon">
          <el-icon class="video-icon"><VideoCameraFilled /></el-icon>
        </div>

        <div class="status-info">
          <div class="file-name">{{ fileName }}</div>

          <div class="progress-area" v-if="uploadStatus === 'uploading'">
            <div class="progress-info">
              <span>上传中</span>
              <span>{{ progress }}%</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: progress + '%' }"></div>
            </div>
          </div>

          <div class="success-info" v-if="uploadStatus === 'completed'">
            <el-icon class="success-icon"><CircleCheckFilled /></el-icon>
            <span>视频上传成功！请填写视频信息</span>
          </div>
        </div>
      </div>

      <!-- 分隔线 -->
      <el-divider />

      <!-- 视频信息表单 -->
      <div class="info-form">
        <h3 class="section-title">
          <el-icon><Document /></el-icon>
          视频信息
        </h3>
        <div class="form-item">
          <label class="form-label">封面</label>
          <el-upload
              action=""
              :auto-upload="false"
              :show-file-list="false"
              :on-change="handleCoverChange"
          >
            <template #trigger>
              <el-button  type="primary">选择封面</el-button>
            </template>
          </el-upload>
          <div v-if="coverPreview" style="margin-top: 10px">

<!--            < el-image :src="coverPreview" style="max-width: 200px; border-radius: 4px;">-->
            <el-image

                style="width: 100px; height: 100px"
                :src="coverPreview"


                fit="cover"
            />

          </div>
        </div>

        <div class="form-item">
          <label class="form-label">标题</label>
          <el-input
              v-model="videoInfo.title"
              placeholder="请输入视频标题"
              clearable
          ></el-input>
        </div>

        <div class="form-item">
          <label class="form-label">分区</label>
          <el-select
              v-model="videoInfo.category"
              placeholder="请选择分区"
              style="width: 100%"
          >

            <el-option
              v-for="(category,index) in categories"
              :key="index"
              :label="category.name"
              :value="category.name">

            </el-option>

          </el-select>


        </div>

        <div class="form-item">
          <label class="form-label">标签</label>
          <el-input-tag
              tag-type="info"
              tag-effect="plain"
              v-model="videoInfo.tags"
              placeholder="添加标签，用回车创建"
          >


          </el-input-tag>
          <div class="tag-container">
            <div
                v-for="tag in popularTags"
                :key="tag"
                class="tag-item"
                :class="{ active: videoInfo.tags.includes(tag) }"
                @click="toggleTag(tag)"
            >{{ tag }}</div>
          </div>
        </div>

        <div class="form-item">
          <label class="form-label">简介</label>
          <el-input
              v-model="videoInfo.description"
              type="textarea"
              :rows="4"
              placeholder="请输入视频简介"
          ></el-input>
        </div>


        <div class="submit-area">
          <button class="submit-btn cancel-btn" @click="resetForm">取消</button>
          <button
              class="submit-btn"
              :disabled="uploadStatus !== 'completed'"
              @click="submitVideo"
          >提交视频</button>
        </div>
      </div>
    </div>
  </div>

  <p >
ga
{{videoInfo.videoFile}}
  </p>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import {
  Upload, UploadFilled, VideoCameraFilled,
  CircleCheckFilled, Document
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {apiUploadVideo, apiUploadImage, pushinfo} from "@/api/file.js";
import {getCategories} from "@/api/category.js";
import AppNavbar from '@/components/AppNavbar.vue'

const searchKey = ref('')



// 上传状态：before, uploading, completed
const uploadStatus = ref('before')
const isDragging = ref(false)
const fileInput = ref(null)
const fileName = ref('')
const progress = ref(0)
const coverPreview = ref('')

// 视频信息
const videoInfo = reactive({
  title: '',
  description: '',
  category: '',
  tags: [],
  videoFile: null,
  coverFile: null
})



// 热门标签
const popularTags = ref([
  'Vlog', '游戏', '科技', '美食', '音乐', '教程',
  '开箱', '动漫', '电影', '搞笑', '生活', '学习'
])

// 分类：
const categories = ref([]);


// 初始化加载
onMounted(() => {

  getCate()

})
async function getCate (){

  const res = await getCategories()
  if (res.code === 200){
    categories.value =res.data;
  }
}


// 触发文件选择
const triggerFileInput = () => {
  fileInput.value.click()
}

// 处理拖拽事件
const handleDragOver = (e) => {
  e.preventDefault()
  isDragging.value = true
}

const handleDragLeave = () => {
  isDragging.value = false
}

const handleDrop = (e) => {
  isDragging.value = false
  const files = e.dataTransfer.files
  if (files.length > 0) {
    handleViedo(files[0])
  }
}

// 上传视频文件
const handleFileChange = (e) => {
  const files = e.target.files
  if (files.length > 0) {
    handleViedo(files[0])
  }
}

// 处理视频文件
  async function  handleViedo  (file) {
  if (!file.type.startsWith('video/')) {
    ElMessage.error('请选择视频文件')
    return
  }

  // 获取文件名（不含扩展名）
  const fileNameWithoutExt = file.name.replace(/\.[^/.]+$/, "")
  videoInfo.title = fileNameWithoutExt
  fileName.value = file.name
  uploadStatus.value = 'uploading'

  // 调用七牛云上传API
   await apiUploadVideo(file, {
    next: (e) => {
      // 更新上传进度
      progress.value = e.total.percent
    },
    error: (err) => {
      ElMessage.error(`上传失败: ${err.message}`)
    },
    complete: (res) => {
       // 解构赋值：这样写看起来结构清晰点哈
      const { avinfo,key,mimeType  } = res;
        // 保存视频文件信息
        videoInfo.videoFile = {
          fileKey: key,
          format: mimeType,
          size: avinfo.format.size,
          duration: avinfo.format.duration,
        }
        uploadStatus.value = 'completed'
    }

  });


}

// 封面选择
 async function handleCoverChange (file)  {
  const reader = new FileReader()
  reader.onload = (e) => {
    coverPreview.value = e.target.result
  }
  reader.readAsDataURL(file.raw)

  // 上传封面到七牛云
  await apiUploadImage(file.raw, {
    next: () => {}, // 封面不需要进度
    error: (err) => {
      ElMessage.error(`封面上传失败: ${err.message}`)
    },
    complete: (res) => {
      // 解构赋值：这样写看起来结构清晰点哈

      // 保存视频文件信息
      videoInfo.coverFile = {
        fileKey: res.key,
        format: res.mimeType,
        size: res.fsize,
      }
    }
  });
}

// 提交视频

// 提交视频信息
const submitVideo = () => {
  if (!videoInfo.title) {
    ElMessage.error('请输入视频标题')
    return
  }

  if (!videoInfo.category) {
    ElMessage.error('请选择分区')
    return
  }

  // 确保视频和封面都已上传
  if (!videoInfo.videoFile) {
    ElMessage.error('视频文件未上传完成')
    return
  }


  // 构建 VideoUploadDTO 对象
  const videoUploadDTO = {
    title: videoInfo.title,
    description: videoInfo.description,
    category: videoInfo.category,
    tags: [...videoInfo.tags], // 创建标签数组的副本
    videoFile: videoInfo.videoFile,
    coverFile: videoInfo.coverFile,
    userId: 1
    // userId: 1  可以去掉了
  }

  // 上传的函数

   uploadVideo(videoUploadDTO)



}

async function uploadVideo(videoUploadDTO){
  const res = await pushinfo(videoUploadDTO)
  if (res.code === 200)
  {
    return ElMessage.success(res.msg);
    resetForm()
  }else {
    return ElMessage.success(res.msg);
    // return ElMessage.error(res.msg)
  }
}




// 切换标签
const toggleTag = (tag) => {
  const index = videoInfo.tags.indexOf(tag)
  if (index > -1) {
    videoInfo.tags.splice(index, 1)
  } else {
    videoInfo.tags.push(tag)
  }
}

// 重置表单
const resetForm = () => {
  uploadStatus.value = 'before'
  videoInfo.title = ''
  videoInfo.category = ''
  videoInfo.tags = []
  videoInfo.description = ''
  videoInfo.videoFile = null
  videoInfo.coverFile = null
  coverPreview.value = ''
  progress.value = 0
}
</script>

<style lang="scss" scoped>
.upload-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.page-header {
  padding: 0 0 20px;
  border-bottom: 1px solid #f1f2f3;
  margin-bottom: 30px;

  .page-title {
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

.upload-box {
  border: 2px dashed #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  padding: 60px 20px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;

  &:hover, &.dragover {
    border-color: #00aeec;
    background: #f0f9ff;
  }

  .upload-icon {
    font-size: 64px;
    color: #c0c4cc;
    margin-bottom: 20px;
  }

  .upload-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
  }

  .upload-tip {
    color: #9499a0;
    margin-bottom: 20px;
    font-size: 14px;
  }

  .upload-button {
    padding: 10px 24px;
    background: #00aeec;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
      background: #009ad4;
    }
  }
}

.upload-form-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.upload-status {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px;
  background: #f9fafb;
  border-radius: 8px;

  .status-icon {
    .video-icon {
      font-size: 40px;
      color: #00aeec;
      background: #e6f7ff;
      padding: 15px;
      border-radius: 8px;
    }
  }

  .status-info {
    flex: 1;

    .file-name {
      font-weight: 500;
      margin-bottom: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .progress-area {
      .progress-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 13px;
        color: #61666d;
      }

      .progress-bar {
        height: 6px;
        background: #f1f2f3;
        border-radius: 3px;
        overflow: hidden;
      }

      .progress-fill {
        height: 100%;
        background: #00aeec;
        border-radius: 3px;
        transition: width 0.3s;
      }
    }

    .success-info {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #67c23a;
      font-weight: 500;

      .success-icon {
        font-size: 20px;
      }
    }
  }
}

.el-divider {
  margin: 25px 0;
}

.info-form {
  .section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f2f3;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.form-item {
  margin-bottom: 20px;

  .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
  }
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;

  .tag-item {
    background: #f1f2f3;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: #00aeec;
      color: white;
    }

    &.active {
      background: #00aeec;
      color: white;
    }
  }
}

.submit-area {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #f1f2f3;
  display: flex;
  justify-content: flex-start;
  gap: 12px;

  .submit-btn {
    padding: 10px 24px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .cancel-btn {
    background: #f1f2f3;
    border: none;
    color: #61666d;

    &:hover {
      background: #e5e6eb;
    }
  }

  .submit-btn {
    background: #00aeec;
    border: none;
    color: white;

    &:hover {
      background: #009ad4;
    }
  }
}

@media (max-width: 768px) {
  .upload-container {
    padding: 15px;
    margin: 10px;
  }

  .upload-box {
    padding: 40px 15px;
  }

  .upload-status {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;

    .status-icon {
      align-self: center;
    }
  }
}
</style>







<!--<template>-->
<!--  <div class="upload-container">-->
<!--    <div class="page-header">-->
<!--      <h1 class="page-title">-->
<!--        <el-icon><Upload /></el-icon>-->
<!--        上传视频-->
<!--      </h1>-->
<!--    </div>-->

<!--    &lt;!&ndash; 上传前状态 &ndash;&gt;-->
<!--    <div-->
<!--        class="upload-box"-->
<!--        v-if="uploadStatus === 'before'"-->
<!--        @dragover.prevent="handleDragOver"-->
<!--        @dragleave="handleDragLeave"-->
<!--        @drop.prevent="handleDrop"-->
<!--        :class="{ 'dragover': isDragging }"-->
<!--        @click="triggerFileInput"-->
<!--    >-->
<!--      <el-icon class="upload-icon"><UploadFilled /></el-icon>-->
<!--      <h3 class="upload-title">拖拽视频文件到此处</h3>-->
<!--      <p class="upload-tip">支持MP4、MOV、AVI等常见格式，文件大小不超过10GB</p>-->
<!--      <button class="upload-button">选择文件</button>-->
<!--      <input-->
<!--          type="file"-->
<!--          ref="fileInput"-->
<!--          style="display: none"-->
<!--          accept="video/*"-->
<!--          @change="handleFileChange"-->
<!--      >-->
<!--    </div>-->

<!--    &lt;!&ndash; 上传中和完成状态 &ndash;&gt;-->
<!--    <div class="upload-form-container" v-else>-->
<!--      &lt;!&ndash; 上传状态区域 &ndash;&gt;-->
<!--      <div class="upload-status">-->
<!--        <div class="status-icon">-->
<!--          <el-icon class="video-icon"><VideoCameraFilled /></el-icon>-->
<!--        </div>-->

<!--        <div class="status-info">-->
<!--          <div class="file-name">{{ fileName }}</div>-->

<!--          <div class="progress-area" v-if="uploadStatus === 'uploading'">-->
<!--            <div class="progress-info">-->
<!--              <span>上传中</span>-->
<!--              <span>{{ progress }}%</span>-->
<!--            </div>-->
<!--            <div class="progress-bar">-->
<!--              <div class="progress-fill" :style="{ width: progress + '%' }"></div>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="success-info" v-if="uploadStatus === 'completed'">-->
<!--            <el-icon class="success-icon"><CircleCheckFilled /></el-icon>-->
<!--            <span>视频上传成功！请填写视频信息</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; 分隔线 &ndash;&gt;-->
<!--      <el-divider />-->

<!--      &lt;!&ndash; 视频信息表单 &ndash;&gt;-->
<!--      <div class="info-form">-->
<!--        <h3 class="section-title">-->
<!--          <el-icon><Document /></el-icon>-->
<!--          视频信息-->
<!--        </h3>-->
<!--        <div class="form-item">-->
<!--          <label class="form-label">封面</label>-->
<!--          <el-upload-->
<!--              action=""-->
<!--              :auto-upload="false"-->
<!--              :show-file-list="false"-->
<!--              :on-change="handleCoverChange"-->
<!--          >-->
<!--            <template #trigger>-->
<!--              <el-button  type="primary">选择封面</el-button>-->
<!--            </template>-->
<!--          </el-upload>-->
<!--          <div v-if="coverPreview" style="margin-top: 10px">-->

<!--            &lt;!&ndash;            < el-image :src="coverPreview" style="max-width: 200px; border-radius: 4px;">&ndash;&gt;-->
<!--            <el-image-->

<!--                style="width: 100px; height: 100px"-->
<!--                :src="coverPreview"-->


<!--                fit="cover"-->
<!--            />-->

<!--          </div>-->
<!--        </div>-->

<!--        <div class="form-item">-->
<!--          <label class="form-label">标题</label>-->
<!--          <el-input-->
<!--              v-model="videoInfo.title"-->
<!--              placeholder="请输入视频标题"-->
<!--              clearable-->
<!--          ></el-input>-->
<!--        </div>-->

<!--        <div class="form-item">-->
<!--          <label class="form-label">分区</label>-->
<!--          <el-select-->
<!--              v-model="videoInfo.category"-->
<!--              placeholder="请选择分区"-->
<!--              style="width: 100%"-->
<!--          >-->
<!--            <el-option label="生活" value="生活"></el-option>-->
<!--            <el-option label="游戏" value="游戏"></el-option>-->
<!--            <el-option label="游戏" value="游戏"></el-option>-->
<!--            <el-option label="科技" value="科技"></el-option>-->
<!--            <el-option label="音乐" value="音乐"></el-option>-->
<!--            <el-option label="影视" value="影视"></el-option>-->
<!--            <el-option label="美食" value="美食"></el-option>-->
<!--            <el-option label="动画" value="动画"></el-option>-->
<!--          </el-select>-->
<!--        </div>-->

<!--        <div class="form-item">-->
<!--          <label class="form-label">标签</label>-->
<!--          <el-input-tag-->
<!--              tag-type="info"-->
<!--              tag-effect="plain"-->
<!--              v-model="videoInfo.tags"-->
<!--              placeholder="添加标签，用回车创建"-->
<!--          >-->


<!--          </el-input-tag>-->
<!--          <div class="tag-container">-->
<!--            <div-->
<!--                v-for="tag in popularTags"-->
<!--                :key="tag"-->
<!--                class="tag-item"-->
<!--                :class="{ active: videoInfo.tags.includes(tag) }"-->
<!--                @click="toggleTag(tag)"-->
<!--            >{{ tag }}</div>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="form-item">-->
<!--          <label class="form-label">简介</label>-->
<!--          <el-input-->
<!--              v-model="videoInfo.description"-->
<!--              type="textarea"-->
<!--              :rows="4"-->
<!--              placeholder="请输入视频简介"-->
<!--          ></el-input>-->
<!--        </div>-->


<!--        <div class="submit-area">-->
<!--          <button class="submit-btn cancel-btn" @click="resetForm">取消</button>-->
<!--          <button-->
<!--              class="submit-btn"-->
<!--              :disabled="uploadStatus !== 'completed'"-->
<!--              @click="submitVideo"-->
<!--          >提交视频</button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->

<!--  <p >-->
<!--    ga-->
<!--    {{videoInfo.videoFile}}-->
<!--  </p>-->
<!--</template>-->

<!--<script setup>-->
<!--import { ref, reactive } from 'vue'-->
<!--import {-->
<!--  Upload, UploadFilled, VideoCameraFilled,-->
<!--  CircleCheckFilled, Document-->
<!--} from '@element-plus/icons-vue'-->
<!--import { ElMessage } from 'element-plus'-->
<!--import {apiUploadVideo, apiUploadImage, pushinfo} from "@/api/file.js";-->

<!--// 上传状态：before, uploading, completed-->
<!--const uploadStatus = ref('before')-->
<!--const isDragging = ref(false)-->
<!--const fileInput = ref(null)-->
<!--const fileName = ref('')-->
<!--const progress = ref(0)-->
<!--const coverPreview = ref('')-->

<!--// 视频信息-->
<!--const videoInfo = reactive({-->
<!--  title: '',-->
<!--  description: '',-->
<!--  category: '',-->
<!--  tags: [],-->
<!--  videoFile: null,-->
<!--  coverFile: null-->
<!--})-->

<!--// 热门标签-->
<!--const popularTags = ref([-->
<!--  'Vlog', '游戏', '科技', '美食', '音乐', '教程',-->
<!--  '开箱', '动漫', '电影', '搞笑', '生活', '学习'-->
<!--])-->

<!--// 触发文件选择-->
<!--const triggerFileInput = () => {-->
<!--  fileInput.value.click()-->
<!--}-->

<!--// 处理拖拽事件-->
<!--const handleDragOver = (e) => {-->
<!--  e.preventDefault()-->
<!--  isDragging.value = true-->
<!--}-->

<!--const handleDragLeave = () => {-->
<!--  isDragging.value = false-->
<!--}-->

<!--const handleDrop = (e) => {-->
<!--  isDragging.value = false-->
<!--  const files = e.dataTransfer.files-->
<!--  if (files.length > 0) {-->
<!--    handleViedo(files[0])-->
<!--  }-->
<!--}-->

<!--// 上传视频文件-->
<!--const handleFileChange = (e) => {-->
<!--  const files = e.target.files-->
<!--  if (files.length > 0) {-->
<!--    handleViedo(files[0])-->
<!--  }-->
<!--}-->

<!--// 处理视频文件-->
<!--const handleViedo = (file) => {-->
<!--  if (!file.type.startsWith('video/')) {-->
<!--    ElMessage.error('请选择视频文件')-->
<!--    return-->
<!--  }-->

<!--  // 获取文件名（不含扩展名）-->
<!--  const fileNameWithoutExt = file.name.replace(/\.[^/.]+$/, "")-->
<!--  videoInfo.title = fileNameWithoutExt-->
<!--  fileName.value = file.name-->
<!--  uploadStatus.value = 'uploading'-->

<!--  // 调用七牛云上传API-->
<!--  apiUploadVideo(file, {-->
<!--    next: (e) => {-->
<!--      // 更新上传进度-->
<!--      progress.value = e.total.percent-->
<!--    },-->
<!--    error: (err) => {-->
<!--      ElMessage.error(`上传失败: ${err.message}`)-->
<!--    },-->
<!--    complete: (res) => {-->
<!--      // 解构赋值：这样写看起来结构清晰点哈-->
<!--      const { avinfo,key,mimeType  } = res;-->
<!--      // 保存视频文件信息-->
<!--      videoInfo.videoFile = {-->
<!--        fileKey: key,-->
<!--        format: mimeType,-->
<!--        size: avinfo.format.size,-->
<!--        duration: avinfo.format.duration,-->
<!--      }-->
<!--      uploadStatus.value = 'completed'-->
<!--    }-->

<!--  });-->


<!--}-->

<!--// 封面选择-->
<!--const handleCoverChange = (file) => {-->
<!--  const reader = new FileReader()-->
<!--  reader.onload = (e) => {-->
<!--    coverPreview.value = e.target.result-->
<!--  }-->
<!--  reader.readAsDataURL(file.raw)-->

<!--  // 上传封面到七牛云-->
<!--  apiUploadImage(file.raw, {-->
<!--    next: () => {}, // 封面不需要进度-->
<!--    error: (err) => {-->
<!--      ElMessage.error(`封面上传失败: ${err.message}`)-->
<!--    },-->
<!--    complete: (res) => {-->
<!--      // 解构赋值：这样写看起来结构清晰点哈-->

<!--      // 保存视频文件信息-->
<!--      videoInfo.coverFile = {-->
<!--        fileKey: res.key,-->
<!--        format: res.mimeType,-->
<!--        size: res.fsize,-->
<!--      }-->
<!--    }-->
<!--  });-->
<!--}-->

<!--// 提交视频-->

<!--const submitVideo = () => {-->
<!--  if (!videoInfo.title) {-->
<!--    ElMessage.error('请输入视频标题')-->
<!--    return-->
<!--  }-->

<!--  if (!videoInfo.category) {-->
<!--    ElMessage.error('请选择分区')-->
<!--    return-->
<!--  }-->

<!--  // 确保视频和封面都已上传-->
<!--  if (!videoInfo.videoFile) {-->
<!--    ElMessage.error('视频文件未上传完成')-->
<!--    return-->
<!--  }-->


<!--  // 构建 VideoUploadDTO 对象-->
<!--  const videoUploadDTO = {-->
<!--    title: videoInfo.title,-->
<!--    description: videoInfo.description,-->
<!--    category: videoInfo.category,-->
<!--    tags: [...videoInfo.tags], // 创建标签数组的副本-->
<!--    videoFile: videoInfo.videoFile,-->
<!--    coverFile: videoInfo.coverFile,-->
<!--    userId: 1-->
<!--  }-->

<!--  // 上传的函数-->
<!--  pushinfo(videoUploadDTO)-->
<!--  console.log('提交的视频信息:', videoUploadDTO)-->

<!--  setTimeout(() => {-->
<!--    resetForm()-->
<!--  }, 2000)-->








<!--}-->

<!--// 切换标签-->
<!--const toggleTag = (tag) => {-->
<!--  const index = videoInfo.tags.indexOf(tag)-->
<!--  if (index > -1) {-->
<!--    videoInfo.tags.splice(index, 1)-->
<!--  } else {-->
<!--    videoInfo.tags.push(tag)-->
<!--  }-->
<!--}-->

<!--// 重置表单-->
<!--const resetForm = () => {-->
<!--  uploadStatus.value = 'before'-->
<!--  videoInfo.title = ''-->
<!--  videoInfo.category = ''-->
<!--  videoInfo.tags = []-->
<!--  videoInfo.description = ''-->
<!--  videoInfo.videoFile = null-->
<!--  videoInfo.coverFile = null-->
<!--  coverPreview.value = ''-->
<!--  progress.value = 0-->
<!--}-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--.upload-container {-->
<!--  max-width: 800px;-->
<!--  margin: 20px auto;-->
<!--  padding: 20px;-->
<!--  background: #fff;-->
<!--  border-radius: 8px;-->
<!--  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);-->
<!--}-->

<!--.page-header {-->
<!--  padding: 0 0 20px;-->
<!--  border-bottom: 1px solid #f1f2f3;-->
<!--  margin-bottom: 30px;-->

<!--  .page-title {-->
<!--    font-size: 24px;-->
<!--    font-weight: 600;-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--    gap: 10px;-->
<!--  }-->
<!--}-->

<!--.upload-box {-->
<!--  border: 2px dashed #e5e7eb;-->
<!--  border-radius: 8px;-->
<!--  background: #f9fafb;-->
<!--  padding: 60px 20px;-->
<!--  text-align: center;-->
<!--  transition: all 0.3s;-->
<!--  cursor: pointer;-->

<!--  &:hover, &.dragover {-->
<!--    border-color: #00aeec;-->
<!--    background: #f0f9ff;-->
<!--  }-->

<!--  .upload-icon {-->
<!--    font-size: 64px;-->
<!--    color: #c0c4cc;-->
<!--    margin-bottom: 20px;-->
<!--  }-->

<!--  .upload-title {-->
<!--    font-size: 18px;-->
<!--    font-weight: 500;-->
<!--    margin-bottom: 10px;-->
<!--  }-->

<!--  .upload-tip {-->
<!--    color: #9499a0;-->
<!--    margin-bottom: 20px;-->
<!--    font-size: 14px;-->
<!--  }-->

<!--  .upload-button {-->
<!--    padding: 10px 24px;-->
<!--    background: #00aeec;-->
<!--    color: white;-->
<!--    border: none;-->
<!--    border-radius: 4px;-->
<!--    font-size: 14px;-->
<!--    cursor: pointer;-->
<!--    transition: background 0.3s;-->

<!--    &:hover {-->
<!--      background: #009ad4;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.upload-form-container {-->
<!--  background: #fff;-->
<!--  border-radius: 8px;-->
<!--  padding: 20px;-->
<!--  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);-->
<!--}-->

<!--.upload-status {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 20px;-->
<!--  padding: 15px;-->
<!--  background: #f9fafb;-->
<!--  border-radius: 8px;-->

<!--  .status-icon {-->
<!--    .video-icon {-->
<!--      font-size: 40px;-->
<!--      color: #00aeec;-->
<!--      background: #e6f7ff;-->
<!--      padding: 15px;-->
<!--      border-radius: 8px;-->
<!--    }-->
<!--  }-->

<!--  .status-info {-->
<!--    flex: 1;-->

<!--    .file-name {-->
<!--      font-weight: 500;-->
<!--      margin-bottom: 10px;-->
<!--      overflow: hidden;-->
<!--      text-overflow: ellipsis;-->
<!--      white-space: nowrap;-->
<!--    }-->

<!--    .progress-area {-->
<!--      .progress-info {-->
<!--        display: flex;-->
<!--        justify-content: space-between;-->
<!--        margin-bottom: 8px;-->
<!--        font-size: 13px;-->
<!--        color: #61666d;-->
<!--      }-->

<!--      .progress-bar {-->
<!--        height: 6px;-->
<!--        background: #f1f2f3;-->
<!--        border-radius: 3px;-->
<!--        overflow: hidden;-->
<!--      }-->

<!--      .progress-fill {-->
<!--        height: 100%;-->
<!--        background: #00aeec;-->
<!--        border-radius: 3px;-->
<!--        transition: width 0.3s;-->
<!--      }-->
<!--    }-->

<!--    .success-info {-->
<!--      display: flex;-->
<!--      align-items: center;-->
<!--      gap: 8px;-->
<!--      color: #67c23a;-->
<!--      font-weight: 500;-->

<!--      .success-icon {-->
<!--        font-size: 20px;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.el-divider {-->
<!--  margin: 25px 0;-->
<!--}-->

<!--.info-form {-->
<!--  .section-title {-->
<!--    font-size: 18px;-->
<!--    font-weight: 600;-->
<!--    margin-bottom: 20px;-->
<!--    padding-bottom: 10px;-->
<!--    border-bottom: 1px solid #f1f2f3;-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--    gap: 8px;-->
<!--  }-->
<!--}-->

<!--.form-item {-->
<!--  margin-bottom: 20px;-->

<!--  .form-label {-->
<!--    display: block;-->
<!--    margin-bottom: 8px;-->
<!--    font-weight: 500;-->
<!--    font-size: 14px;-->
<!--  }-->
<!--}-->

<!--.tag-container {-->
<!--  display: flex;-->
<!--  flex-wrap: wrap;-->
<!--  gap: 8px;-->
<!--  margin-top: 8px;-->

<!--  .tag-item {-->
<!--    background: #f1f2f3;-->
<!--    padding: 4px 12px;-->
<!--    border-radius: 4px;-->
<!--    font-size: 13px;-->
<!--    cursor: pointer;-->
<!--    transition: all 0.3s;-->

<!--    &:hover {-->
<!--      background: #00aeec;-->
<!--      color: white;-->
<!--    }-->

<!--    &.active {-->
<!--      background: #00aeec;-->
<!--      color: white;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.submit-area {-->
<!--  margin-top: 30px;-->
<!--  padding-top: 20px;-->
<!--  border-top: 1px solid #f1f2f3;-->
<!--  display: flex;-->
<!--  justify-content: flex-start;-->
<!--  gap: 12px;-->

<!--  .submit-btn {-->
<!--    padding: 10px 24px;-->
<!--    border-radius: 4px;-->
<!--    font-size: 14px;-->
<!--    cursor: pointer;-->
<!--    transition: all 0.3s;-->
<!--  }-->

<!--  .cancel-btn {-->
<!--    background: #f1f2f3;-->
<!--    border: none;-->
<!--    color: #61666d;-->

<!--    &:hover {-->
<!--      background: #e5e6eb;-->
<!--    }-->
<!--  }-->

<!--  .submit-btn {-->
<!--    background: #00aeec;-->
<!--    border: none;-->
<!--    color: white;-->

<!--    &:hover {-->
<!--      background: #009ad4;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--@media (max-width: 768px) {-->
<!--  .upload-container {-->
<!--    padding: 15px;-->
<!--    margin: 10px;-->
<!--  }-->

<!--  .upload-box {-->
<!--    padding: 40px 15px;-->
<!--  }-->

<!--  .upload-status {-->
<!--    flex-direction: column;-->
<!--    align-items: flex-start;-->
<!--    gap: 15px;-->

<!--    .status-icon {-->
<!--      align-self: center;-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</style>-->

